<template>
  <div id="outflowChart"></div>
</template>
<script>
export default {
  name: "outflowChart",
  props: {
    outflowChartData: {
      type: Object,
      default: () => { }
    },
  },
  watch: {
    outflowChartData: {
      handler (value) {
        console.log(value)
        // debugger;
        this.initCharts(value.flowxData, value.flowyData,);
      },
      deep: true,
    },
  },
  data () {
    return {

    };
  },
  created () {
  },
  mounted () {
  },
  methods: {
    initCharts (flowxData, flowyData) {
      let myCharts = this.$echarts.init(document.getElementById('outflowChart'));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: flowxData
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          y: 15,
          y2: 30,
          x: 61,
        },
        series: [
          {
            data: flowyData,
            type: 'line',
            smooth: true,
            color: ["#0B9AC3"],
            areaStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#F0F9FC'    // 0% 处的颜色
                }, {
                  offset: 1, color: '#F0F9FC' //   100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myCharts.setOption(option, true);
      window.addEventListener("resize", () => {
        myCharts.resize();
      });
    }
  }
}
</script>
<style>
#outflowChart {
  z-index: 999;
  padding-left: 25px;
  width: 440px;
  height: 150px;
}
</style>